<script>
export default {
    name: "PersonCard",
    data(){
        return{
            user:{
                name:'Emily-Summer',
                sex:'女',
                blood:'O',
                age:20,
                country:'中国',
                birthday:'7月1日',
                work:'程序员',
                constellation:'摩羯座',
                company:'飞鱼客栈'
            }
        }
    }
}
</script>

<template>
    <div class="flex row" style="width: 100%;border-radius: 6px;box-shadow:0 0 15px 0 rgba(0,0,0,.1);">
       <img src="/resume/index/avatar.png" alt="" style="width: 283px;height: 392px">
        <div class="flex column" style="width: 600px;margin: 30px 50px">
            <span class="name">{{user.name}}</span>
            <el-divider />
            <div class="flex row space-between" style="width: 100%">
                <span class="info">性别:&emsp;&emsp;{{user.sex}}</span>
                <span class="info">血型:&emsp;&emsp;{{user.blood}}型</span>
            </div>
            <div class="flex row space-between" style="width: 100%">
                <span class="info">年龄:&emsp;&emsp;{{user.age}}</span>
                <span class="info">故乡:&emsp;&emsp;{{user.country}}</span>
            </div>
            <div class="flex row space-between" style="width: 100%">
                <span class="info">生日:&emsp;&emsp;{{user.birthday}}</span>
                <span class="info">职业:&emsp;&emsp;{{user.work}}</span>
            </div>
            <div class="flex row space-between" style="width: 100%">
                <span class="info">星座:&emsp;&emsp;{{user.constellation}}</span>
                <span class="info">公司名称:&emsp;&emsp;{{user.company}}</span>
            </div>
        </div>
    </div>
</template>

<style scoped>
.name{
    color: rgb(68, 68, 68);
    font-size: 20px;
}
.info{
    width: 50%;
    font-size: 14px;
    color: rgb(119, 119, 119);
    line-height: 40px;
    text-align: left;
}
</style>
